<template>
  <div>
    <div class="content">
      <div :style="{
        backgroundImage: `url(${require('../images/sxx.png')})`,
      }" class="content1-style">
        <div class="card1" id="card1" @scroll="scrollEnd">
          <div id="card-head" class="common-head">业务生产类系统</div>
          <div v-for="(item, index) of list1.data" :key="item.id" :ref="list1.refName" class="common-item"
            :style="{ top: `${40 + index * 40}px` }">
            <img :src="image1" style="width: 20px; height: 20px; margin-right: 5px" />
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="card2" id="card2">
        <div class="common-head">数据交换类系统</div>
        <div v-for="(item, index) of list2.data" :key="item.id" :ref="list2.refName" class="common-item"
          :style="{ top: `${40 + index * 40}px` }">
          <img :src="image2" style="width: 20px; height: 20px; margin-right: 5px" />
          {{ item.name }}
        </div>
      </div>
      <div class="card3" id="card3">
        <div class="common-head">数据仓库</div>
        <div v-for="(item, index) of list3.data" :key="item.id" :ref="list3.refName" class="common-item"
          :style="{ top: `${40 + index * 40}px` }">
          <img :src="image3" style="width: 20px; height: 20px; margin-right: 5px" />
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeaderLine from "leader-line-vue";

let timeoutHdr = null;
export default {
  name: "app-line2",
  data() {
    return {
      list1: {
        domId: "card1",
        refName: "card1ItemRefs",
        data: [
          {
            id: "start1",
            name: "客户关系管理系统",
            target: ["end1"],
          },
          {
            id: "start2",
            name: "核心国结系统",
          },
          {
            id: "start3",
            name: "全流程信贷系统",
          },
          {
            id: "start4",
            name: "中小企业贷款系统",
          },
          {
            id: "start5",
            name: "核心系统",
          },
          {
            id: "start6",
            name: "核心柜面系统",
          },
          {
            id: "start7",
            name: "助学贷款系统",
          },
          {
            id: "start8",
            name: "测试系统1",
          },
          {
            id: "start9",
            name: "测试系统2",
            target: ["end1"],
          },
          {
            id: "start10",
            name: "测试系统3",
          },
        ],
      },
      list2: {
        domId: "card2",
        refName: "card2ItemRefs",
        data: [
          {
            id: "end1",
            name: "DS区",
            target: ["end31", "end32"],
          },
        ],
      },
      list3: {
        domId: "card3",
        refName: "card3ItemRefs",
        data: [
          {
            id: "end31",
            name: "临时区",
          },
          {
            id: "end32",
            name: "基础汇总区",
          },
          {
            id: "end33",
            name: "统一报表集市",
          },
        ],
      },
      image1: require("../images/biz.png"),
      image2: require("../images/os.png"),
      image3: require("../images/data.png"),
      image4: require("../images/sxx.png"),
    };
  },
  mounted() {
    this.addLine();
  },
  methods: {
    scrollEnd() {
      // 清空当前连线
      const svgs = document.getElementsByTagName("svg");
      for (let temp of svgs) {
        temp.remove();
      }
      clearTimeout(timeoutHdr);
      timeoutHdr = setTimeout(() => {
        this.addLine();
      }, 300);
    },
    /**
     * 动态连线
     * @param currentList 起始数组
     * @param targetList 目标数组
     */
    renderExec(currentList, targetList) {
      for (let i in currentList.data) {
        // 查找包含连线的数据
        if (currentList.data[i].target) {
          let targetIndex = [];
          // 查找目标index
          for (let tempTarget of currentList.data[i].target) {
            for (let j in targetList.data) {
              if (tempTarget === targetList.data[j].id) {
                targetIndex.push(j);
                break;
              }
            }
          }
          if (targetIndex.length !== 0) {
            // 动态获取div坐标
            const divContent = document.getElementById(currentList.domId);
            const rect = divContent.getBoundingClientRect();
            const rectHeadBottom = rect.top + 60;
            // 判断是否在区域内
            if (
              this.$refs[currentList.refName][i].getBoundingClientRect()
                .bottom > rectHeadBottom &&
              this.$refs[currentList.refName][i].getBoundingClientRect().top <
              rect.bottom - 32
            ) {
              // 循环绘制连线
              targetIndex.map((res) => {
                LeaderLine.setLine(
                  this.$refs[currentList.refName][i],
                  this.$refs[targetList.refName][res],
                  {
                    color: "#c7c7c7",
                    size: 2,
                    dash: { animation: true },
                  }
                );
              });
            }
          }
        }
      }
    },
    // 执行渲染操作
    addLine() {
      this.renderExec(this.list1, this.list2);
      this.renderExec(this.list2, this.list3);
    },
  },
};
</script>
<style lang="less" scoped>
.content1-style {
  width: 135px;
  height: 370px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  perspective: 800px;
}

.common-head {
  position: sticky;
  top: 0px;
  background: #e5e5e5;
  color: #000;
  z-index: 99;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.common-item {
  // position: absolute;
  display: flex;
  align-items: center;
  padding-left: 30px;
  margin-top: 10px;
}

.common-item2 {
  // position: absolute;
  display: flex;
  align-items: center;
  margin-top: 10px;

}

.content {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  perspective: 800px;
}

.card1 {
  width: 185px;
  height: 320px;
  background: #e5e5e500;
  transform: rotateY(-60deg);
  overflow: scroll;
  margin-left: -35px;
  margin-top: 30px;
}

.card1::-webkit-scrollbar {
  display: none;
}

.card2 {
  width: 200px;
  height: 70px;
  background: #e5e5e5;
  margin-left: 50px;
  transform: rotateY(-60deg);

  // border-top-right-radius: 20px;
  // border-bottom-right-radius: 20px;

}

// .card2 :after {
//   /* 这个伪类的作用就是一个圆弧的背景色 */
//   width: 120%;
//   height: 200px;
//   position: absolute;
//   left: -20%;
//   /* 之所以left:20%,是因为width:140%，宝贝可以是是别的值，例如width:160%，那么left:30%才能水平居中，可以发现规律的 */
//   top: 0;
//   z-index: -1;
//   /*层叠顺序，最底层显示*/
//   content: '';
//   border-radius: 0 10% 10% 0;
//   /*分别对应 左上 右上 右下 左下*/
//   background-color: pink;
//   /* 将这个伪类水平居中 */
// }

.card3 {
  width: 200px;
  height: 150px;
  background: #e5e5e5;
  margin-left: 50px;
  transform: rotateY(-60deg);
}
</style>
